<template>
  <dw-page-warpper>
    <dw-menu-datagrid-form
      v-show="stateFlag === 'list'"
      :buttons="buttons"
      :columns="columns"
      :data-grid-title="dataGridTitle"
      :operation-Width="260"
      v-model:activeFormData="formData"
      :render-form-title="renderFormTitle"
      :render-bind-edit-data="renderBindEditData"
      :get-page-http-config="getPageHttpConfig"
      :del-info-http-config="delInfoHttpConfig"
      :del-list-http-config="delListHttpConfig"
      :get-info-http-config="getInfoHttpConfig"
      :add-info-http-config="addInfoHttpConfig"
      :update-info-http-config="updateInfoHttpConfig"
    >
      <template #btnShowBatchInsertSlot>
        <el-button @click="showBatchInsertSheet" type="success">批量新增</el-button>
      </template>
      <template #formSlot>
        <el-descriptions :column="2" border>
          <el-descriptions-item label-align="right" label-width="160px">
            <template #label>
              <div class="columnName">列名称</div>
            </template>
            <div>
              <el-form-item
                prop="columnName"
                :rules="[
                  {
                    required: true,
                    message: '列名称不能为空!',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formData.columnName"></el-input>
              </el-form-item>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="160px">
            <template #label>
              <div class="dataType">数据类型</div>
            </template>
            <div>
              <el-form-item
                prop="dataType"
                :rules="[
                  {
                    required: true,
                    message: '数据类型不能为空!',
                    trigger: 'change',
                  },
                ]"
              >
                <el-input v-model="formData.dataType"></el-input>
              </el-form-item>
            </div>
          </el-descriptions-item>

          <el-descriptions-item label-align="right" label-width="160px">
            <template #label>
              <div class="digitLength">长度</div>
            </template>
            <div>
              <el-form-item prop="digitLength">
                <el-input-number v-model="formData.digitLength" controls-position="right" />
              </el-form-item>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="160px">
            <template #label>
              <div class="numberScale">小数</div>
            </template>
            <div>
              <el-form-item prop="numberScale">
                <el-input-number v-model="formData.numberScale" controls-position="right" />
              </el-form-item>
            </div>
          </el-descriptions-item>

          <el-descriptions-item label-align="right" label-width="160px" :span="4">
            <template #label>
              <div class="sortNo">排序</div>
            </template>
            <div>
              <el-form-item prop="sortNo">
                <el-input-number v-model="formData.sortNo" />
              </el-form-item>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="160px" :span="4">
            <template #label>
              <div class="columnComment">备注</div>
            </template>
            <div>
              <el-form-item prop="columnComment">
                <el-input v-model="formData.columnComment" type="textarea" placeholder="Please input" />
              </el-form-item>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </template>
    </dw-menu-datagrid-form>
    <batch-insert-sheet ref="batchInsertSheetRef" v-if="stateFlag === 'sheet'" @back="back"></batch-insert-sheet>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { IAddInfoHttpConfig, IButton, IColumn, IDelInfoHttpConfig, IDelListHttpConfig, IGetInfoHttpConfig, IGetPageHttpConfig, IUpdateInfoHttpConfig } from '@/types/menu-datagrid-form';

import type { IDatabaseColumnStandard, ISaveDatabaseColumnStandard } from './database-column-standard';
import BatchInsertSheet from './components/batch-insert-sheet.vue';
import { dwDeepClone } from '@/utils/func';
defineOptions({
  name: 'DbDatasource',
});
const stateFlag = ref<string>('list');
const buttons: IButton[] = [
  {
    code: 'add',
    extendFlag: true,
  },
  {
    slotName: 'btnShowBatchInsertSlot',
    extendFlag: false,
  },
  {
    code: 'batchDelete',
    extendFlag: true,
  },
];
const formData = ref<IDatabaseColumnStandard>({
  id: '',
  columnName: '',
  columnDefault: '',
  required: 1,
  dataType: '',
  characterMaximumLength: 1,
  characterOctetLength: 1,
  digitLength: 1,
  numericPrecision: 1,
  numberScale: 1,
  datetimePrecision: 1,
  columnType: '',
  columnKey: '',
  columnComment: '',
});

const dataGridTitle = '数据库列标准';
const renderFormTitle = (stateValue: 'add' | 'edit', data: IDatabaseColumnStandard) => {
  if (stateValue === 'add') {
    return '列标准信息';
  } else {
    return data.columnName;
  }
};
const showBatchInsertSheet = () => {
  stateFlag.value = 'sheet';
};
const back = () => {
  stateFlag.value = 'list';
};
const renderBindEditData = (data: IDatabaseColumnStandard) => {
  const result: ISaveDatabaseColumnStandard = {
    id: data.id,
    columnName: data.columnName,
    required: 0,
    dataType: data.dataType,
    columnComment: data.columnComment,
  };
  return result;
};
const columns = ref<IColumn[]>([
  {
    prop: 'columnName',
    label: '列名',
    align: 'left',
    width: 280,
  },
  {
    prop: 'columnType',
    label: '数据类型',
    align: 'left',
    width: 260,
  },
  {
    prop: 'columnComment',
    label: '备注',
    align: 'left',
  },
  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
]);
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/modeling/database/column/standard/#{id}',
  delInfoMsgEmphasize: '#{column/standardComment}',
};
const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/modeling/database/column/standard/list',
};
const getPageHttpConfig: IGetPageHttpConfig<IDatabaseColumnStandard> = {
  url: '/admin-api/modeling/database/column/standard/page/list',
};
const getInfoHttpConfig: IGetInfoHttpConfig<IDatabaseColumnStandard> = {
  url: '/admin-api/modeling/database/column/standard/#{id}',
};
const addInfoHttpConfig: IAddInfoHttpConfig<IDatabaseColumnStandard> = {
  url: '/admin-api/modeling/database/column/standard',
};
const updateInfoHttpConfig: IUpdateInfoHttpConfig<IDatabaseColumnStandard> = {
  url: '/admin-api/modeling/database/column/standard',
};
</script>
